<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">
                    <img :src="user.img" class="avatar">
                    {{ user.nick }}
                </span>
                <el-button style="float: right;" type="primary" @click="dialogVisible = true">编辑资料</el-button>
            </div>
            <div v-for="o in list" class="text item">
                <a :href="o.href">{{ o.title }}</a>
            </div>
        </el-card>

        <el-dialog title="编辑信息" v-model="dialogVisible" size="tiny" :close-on-click-modal="closeonclickmodal">
            <image-single></image-single>

            <el-form label-position="right" label-width="80px" :model="info">
                <el-form-item label="名号">
                    <el-input v-model="info.name"></el-input>
                </el-form-item>
                <el-form-item label="几句独白">
                    <el-input v-model="info.phrase"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                <el-radio-group v-model="info.sex" size="larage">
                    <el-radio-button label="1">男</el-radio-button>
                    <el-radio-button label="2">女</el-radio-button>
                </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editInfo()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }

  .box-card {
    width: 100%;
  }

  .avatar {
    width: 200px;
    height: 200px;
    border-radius:50px;
  }
</style>
<script>
export default {
    props: {
        list: {
            type: [Array, Object]
        },
        user: {
            type: [Array, Object]
        }
    },
    data() {
        return {
            info: {
                'name': '',
                'phrase': '',
                'sex': 1
            },
            dialogVisible: false,
            closeonclickmodal: false
        }
    },
    methods: {
        editInfo(){
            console.log(this.info)
            this.dialogVisible = false
        }
    },
    mounted() {
        console.log(123)
    }
}
</script>